<script setup lang="ts">
import { ConfigGlobal } from '@fl/components'
import { useDesign } from '@fl/hooks/web/useDesign'
import { useAppStore } from '@fl/store/modules/app'
import { computed, watch } from 'vue'
import { useRouter } from 'vue-router'

import { useUserStore } from '@fl/store/modules/user'
import { useGetUserInfo } from '@fl/api/mall-api/authentication'
import { getPlatformToken } from '@fl/logics/authentication'

const userStore = useUserStore()
const { currentRoute } = useRouter()

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('app')

const appStore = useAppStore()

const currentSize = computed(() => appStore.getCurrentSize)

const greyMode = computed(() => appStore.getGreyMode)

appStore.initTheme()

const { refetch: getInfo } = useGetUserInfo(false)
if (!!getPlatformToken() || !!userStore.getUserInfo?.sysUser?.userName) {
    getInfo()
}

watch(() => currentRoute.value, () => {
    const el: any = document.querySelector('.el-scrollbar__wrap')
    if (el?.scrollTop && el.scrollTop > 0) {
        el.scrollTop = 0
    }
})
</script>

<template>
    <ConfigGlobal :size="currentSize">
        <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
    </ConfigGlobal>
</template>

<style lang="less">
@prefix-cls: ~'@{namespace}-app';

.@{prefix-cls}-grey-mode {
    filter: grayscale(100%);
}
</style>
